<template>
  <div class="layout-container">
    <!-- 顶部 -->
    <div class="header">
      <div style="width: 400px; display: flex">
        <img src="@/assets/course.svg" style="width: 50px;margin-left: 15px; margin-right: 20px"/>
        <span style="color: white; display: flex; align-items: center; font-size: 22px">课程管理系统</span>
      </div>
      <div style="flex: 1"></div>
      <div style="display: flex; align-items: center; margin-right: 60px">
        <img src="../../assets/student.jpg" style="width: 45px; border-radius: 50%">
        <div style="color: white; margin-left: 10px; font-size: 16px">{{ data.student.name }}</div>
      <el-dropdown trigger="click">
        <el-icon style="margin-left: 5px; color: white;"><ArrowDown /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleLoginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      </div>
    </div>
    <div class="main-content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <el-menu
            router
            :default-active="router.currentRoute.value.path"
            style="background-color: #324157;"
            text-color="white"
            >
          <el-menu-item index="/student/home">
            <el-icon><House /></el-icon>
            学生首页
          </el-menu-item>
          <el-menu-item index="/student/course-select">
            <el-icon><Memo /></el-icon>
            选修课程
          </el-menu-item>
          <el-menu-item index="/student/course">
            <el-icon><Postcard /></el-icon>
            学生课程
          </el-menu-item>
          <el-menu-item index="/student/time-table">
            <el-icon><ScaleToOriginal /></el-icon>
            课表查询
          </el-menu-item>
          <el-menu-item index="/student/exam">
            <el-icon><DataLine /></el-icon>
            成绩查询
          </el-menu-item>
          <el-menu-item index="/student/info">
            <el-icon><Notebook /></el-icon>
            个人信息
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 内容 -->
      <div class="content-area">
        <RouterView @updateStudent="updateStudent" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import router from "@/router/index.js";
  import {House} from "@element-plus/icons-vue";
  import {reactive} from "vue";

  const data = reactive({
    student: JSON.parse(localStorage.getItem("student"))
  })

  const updateStudent = () => {
    data.student = JSON.parse(localStorage.getItem("student"))
  }

  const handleLoginOut = () => {
    localStorage.clear();
    router.push("/login");
  }
</script>

<style scoped>

.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止外部滚动条 */
}

.header {
  background-color: #324157;
  display: flex;
  height: 70px;
  flex-shrink: 0; /* 防止头部被压缩 */
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden; /* 防止内部滚动条 */
}

.sidebar {
  width: 150px;
  background-color: #324157;
  overflow-y: auto; /* 如果需要侧边栏滚动 */
}

.content-area {
  flex: 1;
  background-color: #F0F0F0;
  padding: 10px;
  overflow-y: auto; /* 允许内容区域滚动 */
  overflow: hidden; /* 防止内部滚动条 */
}

.el-menu .is-active {
  background-color: #283446;
}

.el-menu :hover {
  background-color: #283446;
}
</style>